<template>
  <div class="pages gradesDetails" id="app">
    <div class="pageLevel">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="content-form">
          <el-form-item label="报名姓名:" prop="name">
            <div>{{ruleForm.name}}</div>
          </el-form-item>
          <el-form-item label="报考内容:" prop="certificateType">
            <div>{{certType[ruleForm.certificateType]}}</div>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNumber">
            <div>{{ruleForm.idNumber}}</div>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <div>{{ruleForm.phone}}</div>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <div>{{ruleForm.province}}{{ruleForm.city}}{{ruleForm.area}}{{ruleForm.address}}</div>
          </el-form-item>
          <el-form-item label="报名时间" prop="createTime">
            <div>{{row.registeTime}}</div>
          </el-form-item>
          <el-form-item label="照片" prop="rate">
            <el-image :src="ruleForm.profilePicture" fit="none"></el-image>
            <el-button type="text" @click="openUrl(ruleForm.profilePicture)">下载</el-button>
          </el-form-item>
          <el-form-item label="支付方式" prop="payType">
            <div>{{payTypenow[row.payType]}}</div>
          </el-form-item>
          <el-form-item label="支付金额" prop="payAmount">
            <div>{{row.payAmount}}</div>
          </el-form-item>
          <el-form-item label="学习账号" prop="rate">
            <div>{{ruleForm.account}}</div>
          </el-form-item>
          <el-form-item label="密码" prop="rate">
            <div>{{ruleForm.password}}</div>
          </el-form-item>
          <el-form-item label="考试成绩" prop="rate">
            <div>{{grades[ruleForm.examScore]}}</div>
          </el-form-item>
          <el-form-item label="物流公司" prop="rate">
            <div>{{ruleForm.logisticsCompany}}</div>
          </el-form-item>
          <el-form-item label="物流单号" prop="rate">
            <div>{{ruleForm.trackNumber}}</div>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import state from "@/util/state";
import { register, getvideoFile } from "@/api";
import pageUnit from "@/components/Page";
import { axios } from "@/api/axios";
import Axios from "axios";
import dateClass from "@/util/date.js";
const date = new dateClass();
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  components: { pageUnit },
  props:{'id':String,'source': Number,'row':Object},
  data() {
    return {
      payTypenow: ["微信", "支付宝"],
      grades: ["不合格", "合格"],
      certType: state.certTypeArr,
      ruleForm: {
        name: "",
        certificateType: 0,
        phone: "",
        address: "",
        idNumber: "",
        createTime: "",
        payType: "",
        payAmount: "",
        account: "",
        password: "",
        examScore: "",
        profilePicture: ""
      },
      options: [
        {
          value: "0",
          label: "顺丰速运"
        },
        {
          value: "1",
          label: "中通快递"
        },
        {
          value: "2",
          label: "圆通快递"
        },
        {
          value: "3",
          label: "申通快递"
        },
        {
          value: "4",
          label: "韵达速运"
        },
        {
          value: "5",
          label: "EMS"
        },
        {
          value: "6",
          label: "天天快递"
        },
        {
          value: "7",
          label: "百世快递"
        }
      ],
    };
  },
  computed: mapState(["merchantId", "sub", "power"]),
  mounted() {
    this.getcouponList();
  },
  methods: {
    //成绩
    getcouponList(pageSize, pageNum) {
      let data = {
        id: this.id,
        source: this.source
      };
      register(data).then(res => {
        if (this.row.registeTime != null) {
          this.row.registeTime = date.timestampToTimes(this.row.registeTime);
        }
        if (res.data.logisticsCompany != null) {
          res.data.logisticsCompany = this.options[res.data.logisticsCompany].label;
        }
        if (this.source==2) {
          this.row.payType=res.data.payType
          this.row.payAmount=res.data.payAmount
        }
        this.ruleForm = res.data;
      });
    },
    //创建图片
    getUrlBase64(url) {
      return new Promise(resolve => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //允许跨域
        img.setAttribute("crossOrigin", "Anonymous");
        img.setAttribute("src", url);
        console.log(img);
        img.onload = function() {
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0, img.width, img.height);
          let dataURL = canvas.toDataURL("image/jpeg");
          resolve(dataURL);
          canvas = null;
        };
      });
    },
    //下载
    download(url) {
      this.getUrlBase64(url).then(base64 => {
        let link = document.createElement("a");
        link.href = base64;
        link.download = this.ruleForm.idNumber;
        link.click();
      });
    },
    openUrl(url){
      window.open(url)
    }
  }
};
</script>